<template>
  <div style="display: flex;margin: 20px auto;justify-content: center">
    <div>
      <el-page-header @back="$router.go(-1)">
      </el-page-header>
    </div>
    <div>
      <el-button @click="toExport()" type="primary" style="margin-left: 1000px;">导出评价</el-button>
      <el-scrollbar style="height: 100vh;width: 1100px; margin: 0 auto">
        <el-card class="comment-item" v-for="comment in comments" :key="comment.id">
          <div class="comment-header">
            <div
              style="height: 50px; width: 50px; border-radius: 50%; border: 2px solid black; background-color: transparent; overflow: hidden;">
              <img v-if="comment.userFace" :src="comment.userFace" style="width: 100%; height: 100%; ">
              <div v-else style="width: 100%; height: 100%; background-color: #ccc; color: #fff; text-align: center; line-height: 50px;">
                {{ comment.realname.charAt(0).toUpperCase() }}
              </div>
            </div>
            <span class="user-name">{{ comment.realname }}</span>
            <el-rate v-model="comment.rating_average" disabled show-score text-color="#ff9900"
              score-template="{value}" />
          </div>
          <div class="comment-body">
            <p>{{ comment.comment }}</p>
          </div>
          <div class="comment-footer">
            <span>{{ comment.created }}</span>
            <el-button type="text" @click="toggleReply(comment)">回复</el-button>
          </div>
          <div v-if="comment.editing" class="reply-form">
            <el-input v-model="comment.replyContent" placeholder="请输入回复内容"></el-input>
            <el-button type="primary" @click="submitReply(comment)">提交回复</el-button>
          </div>
          <div v-if="comment.replies && comment.replies.length > 0" class="replies">
            <div v-for="(reply, index) in comment.replies" :key="index" class="reply">
              <div style="height: 40px; width: 40px; border-radius: 50%; background-color: #ccc; color: #fff; text-align: center; line-height: 40px;">
                {{ reply.realname.charAt(0).toUpperCase() }}
              </div>
              <span class="reply-content">{{ reply.content }}</span>
            </div>
          </div>
        </el-card>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { getBlob } from '@/utils/request'

export default {
  data() {
    return {
      comments: [
        {
          id: 1,
          userFace: 'path/to/avatar1.jpg',
          realname: '用户A',
          comment: '这是一条评论内容。',
          rating_average: 4,
          created: '2024-01-01',
          replies: [],
          editing: false,
          replyContent: ''
        },
        {
          id: 2,
          userFace: 'path/to/avatar2.jpg',
          realname: '用户B',
          comment: '这是另一条评论内容。',
          rating_average: 5,
          created: '2024-01-02',
          replies: [
            {
              realname: '回复者C',
              content: '这是对用户B评论的回复。'
            }
          ],
          editing: false,
          replyContent: ''
        }
        // 更多评论...
      ]
    };
  },
  methods: {
    async toExport() {
      // 从当前路由中获取课程ID和课程名
      const { id, name } = this.$route.query;
      console.log(id, name);

      await getBlob('/review/exportReviews', {
        courseId: id,
        courseName: name,
      }).then(res => {
        console.log(res);
        // 创建 Blob 对象
        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        console.log(blob);
        // 创建一个 URL 以指向 Blob 对象
        const url = window.URL.createObjectURL(blob);
        // 创建下载链接
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', `${name}_reviews.xlsx`); // 使用课程名作为文件名的一部分
        document.body.appendChild(link);
        // 自动点击下载链接以触发下载
        link.click();
        // 清理临时元素和对象 URL
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
      })
        .catch(error => {
          // 处理错误并输出到控制台
          console.error('导出失败:', error);
        });
    },
    toggleReply(comment) {
      comment.editing = !comment.editing;
    },
    submitReply(comment) {
      if (comment.replyContent.trim()) {
        comment.replies.push({
          realname: '回复者',
          content: comment.replyContent,
          created: '刚刚'
        });
        comment.replyContent = '';
        comment.editing = false;
      }
    }
  },
  filters: {
    fmtDate(value) {
      const date = new Date(value);
      return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
    }
  }
};
</script>

<style scoped>
.comment-item {
  margin-bottom: 20px;
  max-width: 1100px;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.user-name {
  margin-left: 10px;
  margin-right: 20px;
}

.comment-body {
  margin-bottom: 10px;
}

.comment-footer {
  text-align: right;
}

.reply-form {
  margin-top: 10px;
}

.reply-form /deep/ .el-input__inner {
  border: none;
  border-bottom: 1px solid #dcdfe6;
  border-radius: 0;
}

.reply-form /deep/ .el-button {
  margin-left: 10px;
}

.replies {
  margin-top: 10px;
  padding-left: 20px;
  border-left: 2px solid #ccc;
}

.reply-content {
  margin-left: 10px;
}
</style>